<template>
  <div v-loading="loading">
    <!-- filter start -->
    <div class="filter-container">
      <el-form
        ref="filterForm"
        :model="filterForm"
        inline
        label-width="100px"
        size="small"
      >
        <el-form-item prop="name" label="模块标题：">
          <el-input v-model="filterForm.title" placeholder="请输入表单标题" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="search">查 询</el-button>
          <el-button round @click="reset">重 置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- filter end -->

    <div class="table-container">
      <el-table
        :data="list"
        border
        stripe
        style="width: 100%"
        size="small"
        element-loading-text="加载中"
        empty-text="暂无数据"
      >
        <el-table-column prop="title" label="表单标题" />
        <el-table-column label="创建时间" width="200" prop="title" />
        <el-table-column prop="state" label="上架状态" width="100">
          <template slot-scope="scope">
            <span
              v-if="scope.row.status === 1"
              class="app-text-color-danger"
            >已启用</span>
            <span
              v-else-if="scope.row.status === 0"
              class="app-text-color-success"
            >未启用</span>
          </template>
        </el-table-column>
        <el-table-column label="选择" width="100">
          <template slot-scope="scope">
            <el-radio
              v-model="form.commonCode"
              :label="scope.row.id"
              :disabled="scope.row.status === 0"
              @change="choose(scope.row)"
            >
              {{ form.commonCode === scope.row.id ? "已选" : "选择" }}
            </el-radio>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination-direction
        v-if="paginationConfig.total !== 0"
        :config="paginationConfig"
        @sizeschange="sizesChange"
        @pagechange="pageChange"
      />
    </div>
  </div>
</template>

<script>
import { lowCodePageList } from '@/api/marketing'

export default {
  props: {
    row: {
      required: true,
      type: Object
    }
  },
  data() {
    return {
      // 配置
      // 分页配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      // 状态
      loading: false,
      // 数据
      filterForm: {
        name: null,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      form: {
        commonCode: null
      },
      list: []
    }
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    this.form.commonCode = this.row.insideParams.commonCode
    this.fetchData()
  },
  beforeUpdate() {},
  update() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    /**
     * 数据组
     */
    // 获取门店列表
    fetchData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      this.loading = true
      // 加入page
      this.filterForm.page = page
      this.filterForm.pageSize = pageSize
      const params = Object.assign({}, this.filterForm)
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      lowCodePageList(this.filterForm)
        .then((res) => {
          this.list = res.data.list || []
          this.paginationConfig.total = res.data.total
          // this.paginationConfig.page = res.data.page
        })
        .finally(() => {
          this.loading = false
        })
    },

    /**
     * 按钮组
     */
    // 分页sizes改变
    sizesChange() {
      console.log('分页sizes改变')
      this.fetchData()
    },

    // 分页page改变
    pageChange(e) {
      this.paginationConfig.page = e
      this.$nextTick(() => {
        this.fetchData()
      })
    },

    // 查询
    search() {
      this.fetchData(1)
    },

    // 重置
    reset() {
      this.$refs.filterForm.resetFields()
    },

    // 选择
    choose(row) {
      const params = {
        insidePage: 'pointGoodsDetail',
        path: 'sp-member/pages/customerForm/main',
        mode: 'navigateTo',
        insideParams: {
          insidePageType: 'CUSTOMERFORM',
          commonCode: row.id,
          remark: '站内链接 > 自定义表单 > ' + row.title
        }
      }
      this.$emit('selectInsideLink', { type: 'CUSTOMERFORM', params })
    }
    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped></style>
